<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>区域论坛系统</title>
    <link rel="stylesheet" href="/css/index.css">
    <script src="/layui.js"></script>
    <script src="./power.js"></script>
    <style>
        .types a{
            color: blue;
            
        }
        
        .types a:hover{
            text-decoration: underline;
        }

        .more{
            margin-left: auto;
            
            font-size: 16px;
        }
    </style>
</head>
<body>
    <header>
        <div class="logo">
            区域论坛系统
        </div>
        <ul>
            <li><a href="/">论坛首页</a></li>
            <li><a href="/article/addArticle">发帖</a></li>
            <li><a href="/article/about">关于我们</a></li>
            <li class="search">
                <div>
                    <input id="searchtext" type="search" placeholder="请输入搜索内容">
                    <a id="searchIcon"><img  src="/search.svg" alt="" class="glass"> </a>
                </div>
                <script>
                    layui.use(function(){
                        let $ = layui.$;
                            $('#searchtext').change(function(res){
                                if($(this).val() != '')
                                $('#searchIcon').attr('href','/article/search/' + $('#searchtext').val())
                                else{
                                    $('#searchIcon').attr('href','')
                                }
                            })
                        })
                </script>
            </li>
        </ul>


        <div class="user"></div>
        <script>
             layui.use( function(){
                  var $ = layui.$
                  if(sessionStorage.user){
                    $('.user').append(`
                        <div>欢迎您：<a class="my" href="/user/users/${JSON.parse(sessionStorage.user).id}">${JSON.parse(sessionStorage.user).username}</a></div>
                    `)
                  }else{
                      $('.user').append(`
                        <div class="login">
                            <a href="/user/userLogin">登录</a>
                        </div>
                        <div class="regrister">
                            <a href="/user/regrister">注册</a>
                        </div>
                      `)
                  }
                });
        </script>




    </header>
    <div id="root">
        <div class="img">
            <img src="/index.jpg" alt="">
        </div>
        <div class="notice">
            <h1>公告栏</h1>
            <p id="notice"></p>
            <script>
                layui.use(function(){
                    var $ = layui.$;
                    $.get({
                        url:'/article/notice',
                        success:function(res){
                            $("#notice").html(res.data[0].content)
                        }
                    })
                })
            </script>
        </div>
        <div class="types">
            <script>
                layui.use(function(){
                    var $ = layui.$;
                    $.get({
                        url:'/article/articleList',
                        success:function(res){
                            // 储存uls
                            let uls = [];
                            // 渲染每个分类
                            res.data.forEach((item,index)=>{
                                // 添加分类的标题
                                let ul = document.createElement("ul");
                                let li = document.createElement("li");
                                let a = document.createElement('a');
                                a.innerHTML = "更多 >>"
                                a.setAttribute("class",'more')
                                a.style.color = "#8c8c8c"
                                a.href = "/article/list/" + item.type
                                li.innerHTML = item.typeName;
                                li.append(a);
                                li.setAttribute("data-type_id",item.type_id)
                                ul.append(li)
                                // 渲染分类下面的具体文章
                                item.data.forEach((item,index)=>{
                                    let li = document.createElement("li");
                                    let a = document.createElement('a');
                                    a.innerHTML = (index+1 + '. ') + item.title;
                                    li.innerHTML = a;
                                    a.setAttribute("href",'/article/detail/'+item.id);
                                    li.append(a)
                                    ul.append(li);
                                })
                               uls.push(ul)
                            })
                            // 开始渲染
                            uls.forEach(item=>{
                                $(".types").append(item)
                            })

                        }
                    })
                })
            </script>
               
           
        </div>
    </div>
</body>
</html>